<!--
 * @Description: 
 * @Author: Leequik
 * @Date: 2025-06-13 13:55:04
 * @LastEditTime: 2025-06-13 19:20:43
 * @LastEditors: Leequik
-->
<template>
    <div class="nav">
        <!--replace: 跳转后，会替换掉当前路由 不会留下历史记录，浏览器不能回退-->
        <RouterLink replace :to = "{ 
            name:'home',
            params:{ 
                id:1,
                name:'荒',
                content:'我是荒，也是你们口中的罪血大凶，更是下界的石昊！荒古之内欺压罪血者遗民者，统统镇压！'
            }
        }" class="nav-link">首页</RouterLink>
        
        <RouterLink to="/news" class="nav-link">新闻</RouterLink> 
        <RouterLink :to="
        {   
            path: '/about', 
            query: { id: 1, name: '张三' } 
        }" class="nav-link">关于</RouterLink>
    </div>

</template>

<script lang="ts" setup>

</script>

<style scoped>
.nav { 
    text-align: center;
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-link {
    width: 80px;
    height: 40px;
    text-align: center;
    background-color: orange;
    margin: 0 50px;
    display: inline-block;
    border-radius: 5px;
    font-size: 18px;
}
.nav-link:hover { 
    background-color: red;
}
</style>